If playback doesn't begin shortly, try restarting your device.
5 seconds
Pull up for precise seeking
Properties screen (Loading your listings with server component)
Full screen (f)
11:20
You're signed out
Videos you watch may be added to the TV's watch history and influence TV recommendations. To avoid this, cancel and sign in to YouTube on your computer.
Full Stack Airbnb Clone with Next.js 13 App Router: React, Tailwind, Prisma, MongoDB, NextAuth 2023
Code With Antonio
Code With Antonio
9.3KLikes
215,053Views
Mar 312023
Discord for any problems/errors/bugs: https://discord.gg/SPEBvAz4Vd
Github Repository: https://github.com/AntonioErdeljac/ne...
Cloudinary: https://cloudinary.com/
In this video, we will put a special emphasis on the Next.js 13 App Router, which is the latest addition to the Next.js framework.
The Next.js 13 App Router is a powerful tool that enables you to easily create complex client-side routing in your Next.js applications. In this tutorial, we will use the Next.js 13 App Router to build a fully functional Airbnb clone with seamless navigation and user experience.
Throughout this video, we will guide you step-by-step through the process of building a full-stack web application using the latest web development technologies including React, Tailwind, Prisma, MongoDB, and NextAuth.
This video is perfect for beginner and experienced developers who are looking to learn how to leverage the power of Next.js 13 App Router in their web applications. So, grab your coffee and join us on this exciting journey of building the next big thing in 2023 with Next.js 13 App Router!
Timestamps
00:00 Intro
02:21 Environment setup
09:30 Navbar UI
34:30 Auth UI
01:35:20 Register functionality, MongoDB, Prisma setup
02:09:27 Login functionality
02:28:04 Social Login (Google and Github)
02:44:36 Categories UI
03:11:34 Listing creation step 1 (Category selection)
03:37:43 Listing creation step 2 (Location selection, Map component, Country autocomplete)
04:06:40 Listing creation step 3 (Counter components)
04:17:10 Listing creation step 4 (Image upload, Cloudinary CDN)
04:32:35 Listing creation step 5 (Description and Price, Listing creation POST route)
04:49:00 Fetching listings with server components (Listing card component, direct server action)
05:23:12 Favoriting functionality
05:39:27 Individual Listing View
06:16:57 Listing reservation component
06:42:33 Reservation functionality (routes, logic)
06:55:05 Trips screen (Loading trips with server component)
07:10:59 Reservations screen (Loading guest reservations with server component)
07:33:13 Favorites screen (Loading favorites with server component)
07:42:35 Properties screen (Loading your listings with server component)
07:53:39 Filters modal (Assigning various filters, add advanced querying logic to getListings, add loading and error pages)
08:37:48 Vercel deploy & wrap up
Discord for any problems/errors/bugs: https://discord.gg/SPEBvAz4Vd
Github Repository: https://github.com/AntonioErdeljac/ne...
Cloudinary: https://cloudinary.com/
In this video, we will put a special emphasis on the Next.js 13 App Router, which is the latest addition to the Next.js framework.
The Next.js 13 App Router is a powerful tool that enables you to easily create complex client-side routing in your Next.js applications. In this tutorial, we will use the Next.js 13 App Router to build a fully functional Airbnb clone with seamless navigation and user experience.
Throughout this video, we will guide you step-by-step through the process of building a full-stack web application using the latest web development technologies including React, Tailwind, Prisma, MongoDB, and NextAuth.
This video is perfect for beginner and experienced developers who are looking to learn how to leverage the power of Next.js 13 App Router in their web applications. So, grab your coffee and join us on this exciting journey of building the next big thing in 2023 with Next.js 13 App Router!
Timestamps
00:00 Intro
02:21 Environment setup
09:30 Navbar UI
34:30 Auth UI
01:35:20 Register functionality, MongoDB, Prisma setup
02:09:27 Login functionality
02:28:04 Social Login (Google and Github)
02:44:36 Categories UI
03:11:34 Listing creation step 1 (Category selection)
03:37:43 Listing creation step 2 (Location selection, Map component, Country autocomplete)
04:06:40 Listing creation step 3 (Counter components)
04:17:10 Listing creation step 4 (Image upload, Cloudinary CDN)
04:32:35 Listing creation step 5 (Description and Price, Listing creation POST route)
04:49:00 Fetching listings with server components (Listing card component, direct server action)
05:23:12 Favoriting functionality
05:39:27 Individual Listing View
06:16:57 Listing reservation component
06:42:33 Reservation functionality (routes, logic)
06:55:05 Trips screen (Loading trips with server component)
07:10:59 Reservations screen (Loading guest reservations with server component)
07:33:13 Favorites screen (Loading favorites with server component)
07:42:35 Properties screen (Loading your listings with server component)
07:53:39 Filters modal (Assigning various filters, add advanced querying logic to getListings, add loading and error pages)
08:37:48 Vercel deploy & wrap up
I am highly impressed with the clean code architecture that you have utilized in your coding. Despite using quite some third-party libraries (which are necessary), you have customized most of the components, even small ones like buttons, from scratch based on the specific project requirements. I particularly appreciate how you have abstracted commonly used components and utilized them throughout the entire application. Your code reflects the true fundamental concepts of React which shows how beautiful it can be. Thank you for sharing your valuable content and appreciate your great effort!
Full Stack Airbnb Clone with Next.js 13 App Router: React, Tailwind, Prisma, MongoDB, NextAuth 2023
Discord for any problems/errors/bugs: https://discord.gg/SPEBvAz4Vd
Github Repository: https://github.com/AntonioErdeljac/ne...
Cloudinary: https://cloudinary.com/
In this video, we will put a special emphasis on the Next.js 13 App Router, which is the latest addition to the Next.js framework.
The Next.js 13 App Router is a powerful tool that enables you to easily create complex client-side routing in your Next.js applications. In this tutorial, we will use the Next.js 13 App Router to build a fully functional Airbnb clone with seamless navigation and user experience.
Throughout this video, we will guide you step-by-step through the process of building a full-stack web application using the latest web development technologies including React, Tailwind, Prisma, MongoDB, and NextAuth.
This video is perfect for beginner and experienced developers who are looking to learn how to leverage the power of Next.js 13 App Router in their web applications. So, grab your coffee and join us on this exciting journey of building the next big thing in 2023 with Next.js 13 App Router!
Timestamps
00:00 Intro
02:21 Environment setup
09:30 Navbar UI
34:30 Auth UI
01:35:20 Register functionality, MongoDB, Prisma setup
02:09:27 Login functionality
02:28:04 Social Login (Google and Github)
02:44:36 Categories UI
03:11:34 Listing creation step 1 (Category selection)
03:37:43 Listing creation step 2 (Location selection, Map component, Country autocomplete)
04:06:40 Listing creation step 3 (Counter components)
04:17:10 Listing creation step 4 (Image upload, Cloudinary CDN)
04:32:35 Listing creation step 5 (Description and Price, Listing creation POST route)
04:49:00 Fetching listings with server components (Listing card component, direct server action)
05:23:12 Favoriting functionality
05:39:27 Individual Listing View
06:16:57 Listing reservation component
06:42:33 Reservation functionality (routes, logic)
06:55:05 Trips screen (Loading trips with server component)
07:10:59 Reservations screen (Loading guest reservations with server component)
07:33:13 Favorites screen (Loading favorites with server component)
07:42:35 Properties screen (Loading your listings with server component)
07:53:39 Filters modal (Assigning various filters, add advanced querying logic to getListings, add loading and error pages)
08:37:48 Vercel deploy & wrap up
Hello everyone! Happy to share a new tutorial with you. This time we explore the next Next 13 App Router and create a functionality-packed Airbnb clone! As always, if you get stuck in this very long tutorial, feel free to pop into Discord and we will help you out! https://discord.gg/SPEBvAz4Vd
I am highly impressed with the clean code architecture that you have utilized in your coding. Despite using quite some third-party libraries (which are necessary), you have customized most of the components, even small ones like buttons, from scratch based on the specific project requirements. I particularly appreciate how you have abstracted commonly used components and utilized them throughout the entire application. Your code reflects the true fundamental concepts of React which shows how beautiful it can be. Thank you for sharing your valuable content and appreciate your great effort!
I started this tutorial almost right after it was released, and it took me almost a week because there were so much advanced content to digest. I totally enjoyed this masterclass of yours, which gave an insight on the kind of things developers at big corporations do. This is the second tutorial that I'm doing after the Netflix one, and again thank you so much for walking through the nitty-gritty details step-by-step which is immensely valuable for self-taught developers like myself. I'll dig deeper into the concepts that I'm still weak at, and I look forward to learning from your tutorials again! God Bless!
Wow, what an amazing video! Antonio, you really have a gift for explaining complex topics in a way that's easy to understand. I learned so much. However, while it's tempting to just copy what Antonio does in the video, it's important to remember that true learning comes from actually working with the frameworks and tools yourself, so don't just rely on this video as a crutch. Thank you, Antonio, for the incredible tutorial and for inspiring us to take our skills to the next level!
Antonio, wow! I've always relied on YouTube tutorials to self-learn web development and your video is incredible. I love how you structured and laid out each component, the tech stack is very modern, and you did well to stop and explain certain snippets that are somewhat abstract or more complicated. Your experience definitely shows, and it is truly inspiring.For future videos, it would be awesome if you could explain the reasoning behind using this tech stack and perhaps even areas that would require changes if one were planning to use such a tech stack for a medium-load production project. For example, some questions to just briefly bring up or consider could include whether these queries are efficient and performant, what data could be cached, whether one should use this many dependencies? Overall, such an amazing tutorial, you deserve all the love coming your way, and I hope to see your channel grow even more! Love from Poland and Canada <3
I've been improving myself by watching and doing project videos for a long time. I've learned a lot of new things.But Antonio you're amazing man. You've taken me to a higher level and opened my vision. Please continue with your projects and briefly explain every step you take.
Your content is awesome Antonio. Thanks for all the knowledge acquired, best ever development channel. So complete and easy to learn along. Also, greetings from Brazil
I just discovered your channel recently and sincerely your videos are just incredible, especially the last three on Next Js!
Could you make others but which would use for example GraphQl or TRPC which is quite popular?
I thank you in advance for these requests and thank you again for this very high quality content!
Excellent work! Learning so much from you. It's rare to see such full fledged apps built with professional standards. Hope to see more apps from you soon!
Hey Antonio, great content. I was wondering if possible to implement all the backend with Firebase instead of Mongo and Prisma.Also, why did you chose Mongo and Prisma over Firebase ?
GREAT tutorial videos!!! PLEASE KEEP THEM COMING!!! Also, would be great if you can make a full webapp project that combined with ChatGPT API (for example, making a trip planner web app with Next JS + Tailwind + ChatGPT API) :)
Hey Antonio!I was in the process of trying to build some of this functionality on my own, so this video is incredibly helpful, thank you!I was wondering if you could quickly explain how your approach to the search filtering works, as in my current airbnb clone project I've reached a point where I would need to search index my mongodb listings collection, and build a mongodb aggregation pipeline that can query the nested fields of the dataset I'm working with.Are the query methods you build in this project reliant on a more simple schema and dataset or is Prisma able to simplify the querying process? Can we use Prisma to set up an aggregation pipeline or access Mongodb functions like geoWithin?I'm in the process of starting the video and following along so it may be that you answer some of this within the vid so sorry if these are pre-answered questions!Zak